<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 设置字符编码 -->
  <meta charset="UTF-8">
  <!-- 设置视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 设置页面标题 -->
  <title>番茄任务管理</title>
  <!-- 引入样式表 -->
  <link rel="stylesheet" href="style.css">
  <!-- 设置页面图标 -->
  <link rel="icon" href="data:,">
</head>
<body>
  <!-- 容器 -->
  <div class="container">
    <!-- 头部 -->
    <header>
      <!-- 标题 -->
      <h1>🍅 番茄任务管理</h1>
    </header>
    
    <!-- 番茄钟容器 -->
    <div class="pomodoro-container">
      <!-- 进度环 -->
      <div class="progress-ring">
        <svg width="200" height="200">
          <!-- 背景圆 -->
          <circle cx="100" cy="100" r="90" stroke="#eee" stroke-width="10" fill="none"/>
          <!-- 进度圆 -->
          <circle id="progress" cx="100" cy="100" r="90" stroke="#e74c3c" 
                  stroke-width="10" fill="none" stroke-dasharray="565.48" stroke-dashoffset="0"/>
        </svg>
        <!-- 计时器显示 -->
        <div class="timer-display">
          <!-- 分钟显示 -->
          <span id="minutes">25</span>:<span id="seconds">00</span>
        </div>
      </div>
      <!-- 计时器控制按钮 -->
      <div class="timer-controls">
        <!-- 开始按钮 -->
        <button id="start-btn">开始</button>
        <!-- 暂停按钮 -->
        <button id="pause-btn" disabled>暂停</button>
        <!-- 重置按钮 -->
        <button id="reset-btn">重置</button>
      </div>
      <!-- 模式选择器 -->
      <div class="mode-selector">
        <!-- 工作模式按钮 -->
        <button class="mode-btn active" data-mode="work">工作 (25分钟)</button>
        <!-- 短休息模式按钮 -->
        <button class="mode-btn" data-mode="short-break">短休息 (5分钟)</button>
        <!-- 长休息模式按钮 -->
        <button class="mode-btn" data-mode="long-break">长休息 (15分钟)</button>
      </div>
      <!-- 测试和自定义模式选择器 -->
      <div class="mode-selector" style="margin-top: 10px;">
        <!-- 五秒测试按钮 -->
        <button class="mode-btn" data-mode="quick-test">五秒测试</button>
        <!-- 自定义时间按钮 -->
        <button class="mode-btn" data-mode="custom">自定义时间</button>
      </div>
      <!-- 自定义时间输入框 -->
      <div id="custom-time-container" style="margin-top: 15px;">
        <!-- 分钟输入框 -->
        <input type="number" id="custom-minutes" min="1" max="120" value="25" style="width: 60px; padding: 5px; margin-right: 10px;">
        <!-- 标签 -->
        <label for="custom-minutes">分钟</label>
        <!-- 设置按钮 -->
        <button id="set-custom-time">设置</button>
      </div>
    </div>
    
    <!-- 任务容器 -->
    <div class="task-container">
      <!-- 任务输入框 -->
      <div class="task-input">
        <!-- 输入框 -->
        <input type="text" id="task-input" placeholder="添加新任务...">
        <!-- 添加任务按钮 -->
        <button id="add-task-btn">添加</button>
      </div>
      <!-- 任务列表 -->
      <ul id="task-list"></ul>
      <!-- 任务统计信息 -->
      <div class="task-stats">
        <!-- 剩余任务数量 -->
        <p>剩余任务: <span id="pending-count">0</span> 项</p>
      </div>
      <!-- 统计图表 -->
      <div class="stats-chart">
        <!-- ECharts 容器 -->
        <div id="stats-chart" style="width: 100%; height: 200px;"></div>
      </div>
    </div>
  </div>

  <!-- 闹钟声音 -->
  <audio id="alarm-sound" preload="auto">
      <!-- 音频源 -->
      <source src="alarm.mp3" type="audio/mpeg">
      <source src="https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3" type="">
  </audio>

  <!-- 引入 ECharts 库 -->
  <script src="echarts.min.js"></script>
  <!-- 引入脚本文件 -->
  <script src="script.js"></script>
</body>
</html>